<template>
  <div class="panel left-bottom">
    <div class="radar-chart" ref="chartRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null

// 模拟数据
const generateData = () => {
  return {
    standard: [90, 85, 80, 75, 70, 65], // 标准值
    actual: [85, 78, 82, 70, 65, 60]    // 实际值
  }
}

const initChart = () => {
  if (!chartRef.value) return
  
  chart = echarts.init(chartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    radar: {
      indicator: [
        { name: '氮含量', max: 100 },
        { name: '磷含量', max: 100 },
        { name: '钾含量', max: 100 },
        { name: 'pH值', max: 100 },
        { name: '有机质', max: 100 },
        { name: '含水量', max: 100 }
      ],
      splitNumber: 4,
      center: ['50%', '50%'],
      radius: '65%',
      axisName: {
        color: '#33ffd0',
        fontSize: 10,
        padding: [0, 0, 0, 0]
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(51, 255, 208, 0.2)'
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(51, 255, 208, 0.3)'
        }
      },
      name: {
        formatter: (value: string) => {
          return `{a|${value}}`
        },
        rich: {
          a: {
            color: '#33ffd0',
            fontSize: 10,
            padding: [0, 0, 0, 0]
          }
        }
      }
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: generateData().standard,
          name: '标准值',
          areaStyle: {
            color: 'rgba(51, 255, 208, 0.1)'
          },
          lineStyle: {
            color: '#33ffd0',
            width: 2
          },
          itemStyle: {
            color: '#33ffd0'
          }
        },
        {
          value: generateData().actual,
          name: '实际值',
          areaStyle: {
            color: 'rgba(255, 165, 2, 0.1)'
          },
          lineStyle: {
            color: '#ffa502',
            width: 2
          },
          itemStyle: {
            color: '#ffa502'
          }
        }
      ]
    }],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(51, 255, 208, 0.3)',
      borderWidth: 1,
      padding: [8, 12],
      textStyle: {
        color: '#fff'
      },
      formatter: (params: any) => {
        const data = params.data
        const indicator = params.series.radar.indicator[params.dataIndex]
        return `${params.seriesName}<br/>${indicator.name}: ${data}%`
      }
    },
    legend: {
      data: ['标准值', '实际值'],
      textStyle: {
        color: '#fff',
        fontSize: 10
      },
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 10,
      top: '5%',
      right: '5%'
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '10%',
      bottom: '10%'
    }
  }
  
  chart.setOption(option)
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
    chart = null
  }
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
  if (chart) {
    chart.resize()
  }
}
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.radar-chart {
  height: 100%;
  width: 100%;
}
</style>
